//
// 「我的」页面用于展示用户信息以及其他与用户个人管理相关的页面
<template>
  <div class="user-box">
    <s-header :name="'我的'"></s-header>
    <!-- 个人信息 -->
    <div class="user-info">
      <div class="info">
        <img
          src="http://s.weituibao.com/1583583975067/user-graduate%20(1).png"
        />
        <div class="user-desc">
          <span>昵称：{{ user.nickName }}</span>
          <span>登录名：{{ user.loginName }}</span>
          <span class="name">个性签名：{{ user.introduceSign }}</span>
        </div>
      </div>
    </div>
    <!-- 我的订单 -->
    <div></div>
    <!-- 我的订单 -->
    <div class="mblock2">
      <div class="mblock_tit">
        <div class="mt_l">我的订单</div>
        <div class="mt_r" @click="goTo('order')">
          <span>查看全部订单</span>
          <!-- <van-icon name="arrow" /> -->

          <img
            src="https://youkejingpin.oss-cn-beijing.aliyuncs.com/static/programs/more_black.png"
          />
        </div>
      </div>

      <div class="mblock_order">
        <div class="item">
          <div class="mo_img" @click="goToitem0()" name="0">
            <img
              class="img-1"
              src="https://youkejingpin.oss-cn-beijing.aliyuncs.com/static/programs/morder1.png"
            />
          </div>
          <span>待付款</span>
        </div>

        <div class="item">
          <div class="mo_img" @click="goToitem2()" name="2">
            <img
              class="img-1"
              src="https://youkejingpin.oss-cn-beijing.aliyuncs.com/static/programs/morder2.png"
            />
          </div>
          <span>待发货</span>
        </div>

        <div class="item">
          <div class="mo_img" @click="goToitem1()" name="1">
            <img
              class="img-1"
              src="https://youkejingpin.oss-cn-beijing.aliyuncs.com/static/programs/morder3.png"
            />
          </div>
          <span>待收货</span>
        </div>

        <div class="item">
          <div class="mo_img" @click="goToitem4()" name="4">
            <img
              class="img-1"
              src="https://youkejingpin.oss-cn-beijing.aliyuncs.com/static/programs/morder5.png"
            />
          </div>
          <span>已完成</span>
        </div>

        <div class="item">
          <div class="mo_img" @click="goToitem3()" name="3">
            <img
              class="img-1"
              src="https://youkejingpin.oss-cn-beijing.aliyuncs.com/static/programs/morder4.png"
            />
          </div>
          <span>退款/售后</span>
        </div>
      </div>
    </div>

    <!-- 个人中心 -->
    <div class="mblock2">
      <div class="mblock_tit">
        <div class="mt_l">个人中心</div>
        <!-- <div class="mt_r" @click="goTo('order')">
          <span>查看全部订单</span>
          <img
            src="https://youkejingpin.oss-cn-beijing.aliyuncs.com/static/programs/more_black.png"
          />
        </div> -->
      </div>

      <div class="mblock_order">
        <div class="item">
          <div class="mo_img" @click="goTo('setting')">
            <img
              class="img-1"
              src="https://youkejingpin.oss-cn-beijing.aliyuncs.com/static/programs/morder1.png"
            />
          </div>
          <span>账号管理</span>
        </div>

        <div class="item">
          <div class="mo_img" @click="goTo('address?from=mine')">
            <img
              class="img-1"
              src="https://youkejingpin.oss-cn-beijing.aliyuncs.com/static/programs/morder2.png"
            />
          </div>
          <span>地址管理</span>
        </div>

        <div class="item">
          <div class="mo_img" @click="goTo('about')">
            <img
              class="img-1"
              src="https://youkejingpin.oss-cn-beijing.aliyuncs.com/static/programs/morder3.png"
            />
          </div>
          <span>关于我们</span>
        </div>

        <!-- <div class="item">
          <div class="mo_img">
            <img
              class="img-1"
              src="https://youkejingpin.oss-cn-beijing.aliyuncs.com/static/programs/morder5.png"
            />
          </div>
          <span>已完成</span>
        </div>

        <div class="item">
          <div class="mo_img">
            <img
              class="img-1"
              src="https://youkejingpin.oss-cn-beijing.aliyuncs.com/static/programs/morder4.png"
            />
          </div>
          <span>退款/售后</span>
        </div> -->
      </div>
    </div>

    <!-- <ul class="user-list" v-if="false"> -->
    <!-- <li @click="goTo('order')"> -->
    <!-- 跳转到路由指定的路径 
       path: '/cart',
      this.$router.push({ path: r });

      name: 'cart',
      this.$router.push({ name: r });
      两种方法指定路径
   -->

    <ul class="user-list">
      <!-- <li @click="goTo('order')">
        <span>我的订单</span>
        <van-icon name="arrow" />
      </li> -->
      <div class="title-nav">
        <!-- 方案一 代码良少 只写一个点击事件 -->
        <!-- <span class="item" @click="goToitem(0)" :name="0">待付款</span>
        <span class="item" @click="goToitem(1)" :name="1">待确认</span>
        <span class="item" @click="goToitem(2)" :name="2">待发货</span>
        <span class="item" @click="goToitem(3)" :name="3">已发货</span>
        <span class="item" @click="goToitem(4)" :name="4">交易完成</span> -->

        <!-- 方案二代码量多 每个都需要添加点击事件 -->
        <!-- <span class="item" @click="goToitem0()" name="0">待付款</span>
        <span class="item" @click="goToitem1()" name="1">待确认</span>
        <span class="item" @click="goToitem2()" name="2">待发货</span>
        <span class="item" @click="goToitem3()">已发货</span>
        <span class="item" @click="goToitem4()">交易完成</span> -->
      </div>
      <!--       
      <li @click="goTo('setting')">
        <span>账号管理</span>
        <van-icon name="arrow" />
      </li>
      <li @click="goTo('address?from=mine')">
        <span>地址管理</span>
        <van-icon name="arrow" />
      </li>
      <li @click="goTo('about')">
        <span>关于我们</span>
        <van-icon name="arrow" />
      </li> -->
    </ul>
    <nav-bar></nav-bar>
  </div>
</template>

<script>
import navBar from "@/components/NavBar";
import sHeader from "@/components/SimpleHeader";
import { getUserInfo } from "../service/user";
export default {
  components: {
    navBar,
    sHeader,
  },
  data() {
    return {
      user: {}, //建立一个空的对象
      activeName: "0", //默认第一个
    };
  },
  // async mounted() {
  //   // 获取用户信息数据
  //   const { data } = await getUserInfo();
  //   // 赋值给 user
  //   this.user = data;
  // },
  mounted() {
    this.getUserA();
  },
  methods: {
    async getUserA() {
      const { data } = await getUserInfo();
      //获取登入的用户信息赋值给user
      this.user = data;
      console.log("获取用户登入信息赋值到页面中", data);
    },
    goBack() {
      this.$router.go(-1);
    },
    goTo(r) {
      this.$router.push({ path: r });
    },

    goToitem0() {
      this.$router.push({
        path: "/order?name=0", //待付款
      });
    },
    goToitem1() {
      this.$router.push({
        path: "/order?name=1", //待确认
      });
    },
    goToitem2() {
      this.$router.push({
        path: "/order?name=2", //待发货
      });
    },
    goToitem3() {
      this.$router.push({
        path: "/order?name=3", //已发货
      });
    },

    goToitem4() {
      this.$router.push({
        path: "/order?name=4", //交易完成
      });
    },

    //
    // goToitem(event) {
    //   this.$router.push({
    //     // path: "/order?name=0", //我的订单
    //     path: "/order",
    //     query: {
    //       name: event,
    //     },
    //   });
    // },

    // goToitem(event) {
    //   // console.log("6666666", event);

    //   // this.$rouer.push({ path: "/order?name= " + event.name });

    //   this.$router.push({
    //     // path: "/order?name=2", //我的订单

    //     path: "/order",
    //     query: {
    //       name: event.name,
    //       // name: 2,
    //     },
    //   });

    //   // console.log("99999", event.name);
    // },
  },
};
</script>

<style lang="less" scoped>
@import "../common/style/mixin";
.user-box {
  .user-header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10000;
    .fj();
    .wh(100%, 44px);
    line-height: 44px;
    padding: 0 10px;
    .boxSizing();
    color: #252525;
    background: #fff;
    border-bottom: 1px solid #dcdcdc;
    .user-name {
      font-size: 14px;
    }
  }
  .user-info {
    width: 94%;
    margin: 10px;
    height: 115px;
    background: linear-gradient(90deg, @primary, #51c7c7);
    box-shadow: 0 2px 5px #269090;
    border-radius: 6px;
    margin-top: 60px;
    .info {
      position: relative;
      display: flex;
      width: 100%;
      height: 100%;
      padding: 25px 20px;
      .boxSizing();
      img {
        .wh(60px, 60px);
        border-radius: 50%;
        margin-top: 4px;
      }
      .user-desc {
        display: flex;
        flex-direction: column;
        margin-left: 10px;
        line-height: 20px;
        font-size: 14px;
        color: #fff;
        span {
          color: #fff;
          font-size: 14px;
          padding: 2px 0;
        }
      }
      .account-setting {
        position: absolute;
        top: 10px;
        right: 20px;
        font-size: 13px;
        color: #fff;
        .van-icon-setting-o {
          font-size: 16px;
          vertical-align: -3px;
          margin-right: 4px;
        }
      }
    }
  }

  // 我的订单
  .mblock2 {
    border: 1px solid #e5e5e5;
    box-shadow: 0px 3px 60px 0px rgba(8, 8, 8, 0.08);
    border-radius: 16px;
    padding: 20px 0;

    width: 94%;
    margin: 10px;
    // height: 115px;
    // background: linear-gradient(90deg, @primary, #51c7c7);
    // box-shadow: 0 2px 5px #269090;
    border-radius: 6px;
    margin-top: 20px;

    .mblock_tit {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 40px;
      padding: 0 25px;
      .mt_l {
        font-size: 18px;
        font-weight: bold;
        color: #000000;
      }

      .mt_r {
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .mt_r > span {
        font-size: 14px;
        color: #666;
      }

      .mt_r img {
        width: 6px;
        margin-left: 10px;
      }
    }
    .mblock_order {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-evenly;
      .item {
        text-align: center;
        .mo_img {
          .img-1 {
            width: 40px;
          }
        }
      }
    }
  }
  // 我的订单结束

  .user-list {
    padding: 0 20px;
    margin-top: 20px;
    li {
      height: 40px;
      line-height: 40px;
      border-bottom: 1px solid #e9e9e9;
      display: flex;
      justify-content: space-between;
      font-size: 14px;
      .van-icon-arrow {
        margin-top: 13px;
      }
    }

    .title-nav {
      display: flex;
      justify-content: space-around;
      margin: 20px 0;
      .item {
        display: block;
        display: flex;
        color: pink;
        font-size: 15px;
      }
    }
  }
}
</style>
